<template>
    <div class="section-container">
        <div class="section-item">
            <div class="section-left">
                <img class="img" src="@/assets/imgs/img5.jpg" />
            </div>
            <div class="section-right">
                <span class="title">Your Edge Cloud. Your Way.</span>
                <span class="desc">Wherever you want it – Colocation, Private Data Center, or Public Cloud. Whether you want to move to the cloud, repatriate from the cloud or just need resources closer to your data at the edge.</span>
            </div>
        </div>
        <div class="section-item">
            <div class="section-right">
                <img class="img" src="@/assets/imgs/img6.jpg" />
            </div>
            <div class="section-left special-left">
                <div class="label-section">
                    <span class="title">Multi-Tenant Environment.</span>
                    <span class="title">Single-Tenant Experience.</span>
                    <span class="desc">With Zadara Edge Cloud, multiple tenants are able to run compute and storage resources simultaneously on the same physical machines, without interfering with one another. You can maintain predictable performance, full data privacy and security, and full elasticity,
                        regardless of how many users are active at once. Download the Multi-tenancy & Quality of Service Solution Brief.</span>
                </div>
            </div>
           
        </div>
        <div class="section-item">
            <div class="section-left">
                <img class="img" src="@/assets/imgs/img7.png" />
            </div>
            <div class="section-right">
                <span class="title">Efficient Operations & Significantly Lower TCO.</span>
                <span class="desc">With NO CapEx investment and NO long-term contracts required, you can
                now enjoy high-performance elastic cloud services, including Edge
                computing, without financial or operational burdens. Scale up, down or
                turn off Zadara Edge Cloud Services at any time and only pay for what
                you use.</span>
            </div>
        </div>
        <div class="section-item">
            <div class="section-right">
                <img class="img img-special" src="@/assets/imgs/img8.png" />
            </div>
            <div class="section-left special-left">
                <div class="label-section">
                    <span class="title">Your Success is How We Measure Our Success.</span>
                    <span class="desc">Backed by an industry-best NPS rating of 71, Zadara Edge Cloud users are supported by Zadara’s team of battle-tested cloud experts and backed by our 100% SLA guarantee. With Zadara, you can rest assured that you are partnering with a cloud services provider that will stop at nothing to deliver best-in-class cloud services for your business.</span>
                </div>
            </div>
           
        </div>
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.section-container {
    padding: 0 20px;
    .section-item {
        display: flex;
        flex-direction: column;
        padding: 20px 0;
        .section-left {
            .img {
                width: 100%;
            }
            .title {
                font-size: 20px;
                text-align: center;
                font-family: 'MouldyCheeseRegular';

                &:first-child {
                    margin-top: 40px;
                }
            }

            .desc {
                color: #282828;
                font-size: 17px;
                margin-top: 30px;
            }

            .label-section {
                text-align: left;
                display: flex;
                flex-direction: column;
                margin-right: 20px;
            }
        }

        .special-left {
            display: flex;
            justify-content: flex-end;
        }
        .section-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            .img {
                width: 100%;
            }
            .img-special {
                width: 288px;
                height: 303px;
            }

            .title {
                text-align: center;
                font-size: 20px;
                font-family: 'MouldyCheeseRegular';

                &:first-child {
                    margin-top: 40px;
                }
            }
            .desc {
                color: #282828;
                font-size: 17px;
                margin-top: 30px;
            }
        }
    }
}
</style>